import { h } from 'vue';
import { AdColumn, useAdRender } from '@/components/AdTable';
import { expandAndToString } from '@/utils/common';
import { BasicUpload, ImageSelector } from '@/components/Upload';
import { UploadDragger } from '@/components/UploadDragger';
import { TableImg } from '@/components/Table';
import { uploadApi } from '@/api/sys/upload';
import { List } from 'Linqts';
import { isArray, isNull, isObject, isString } from '@/utils/is';
import { getArticleTypeEnumSchema } from './article.enum';

const articleTypeEnumSchema = getArticleTypeEnumSchema();
export const columns: AdColumn[] = [
  {
    title: '主键',
    dataIndex: 'Id',
    dataType: 'guid',
    width: 300,
    defaultHidden: true,
    filterable: true,
    sorter: true,
    formVisible: true,
    formEditable: false,
  },
  {
    title: '文章类型',
    dataIndex: 'Type',
    dataType: 'enum',
    width: 150,
    formVisible: true,
    formEditable: true,
    required: true,
    filterable: true,
    sorter: false,
    enumData: articleTypeEnumSchema,
  },
  {
    title: '文章标题',
    dataIndex: 'Title',
    dataType: 'string',
    width: 150,
    formVisible: true,
    formEditable: true,
    required: true,
    filterable: true,
    sorter: true,
    align: 'center',
  },
  {
    title: '图片Base64',
    dataIndex: 'ImageBase64',
    dataType: 'image',
    formVisible: true,
    formEditable: true,
    filterable: true,
    required: true,
    sorter: false,
    width: 300,
    align: 'center',
    formSchema: {
      componentProps: {
        accept: ['png', 'jpeg', 'jpg'],        
      },
    },
  },
  {
    title: '单图片上传',
    dataIndex: 'ImageUrl',
    dataType: 'imageupload',
    formVisible: true,
    formEditable: true,
    filterable: true,
    required: true,
    sorter: false,
    width: 300,
    align: 'center',
    formSchema: {
      componentProps: {
        accept: ['png', 'jpeg', 'jpg'],
        maxSize: 2, //M
        maxNumber: 1, //Infinity
      },
    },
  },
  {
    title: '多图片上传',
    dataIndex: 'ImageUrls',
    dataType: 'imageupload',
    formVisible: true,
    formEditable: true,
    filterable: true,
    required: true,
    sorter: false,
    width: 300,
    align: 'center',
    formSchema: {
      componentProps: {
        accept: ['png', 'jpeg', 'jpg'],
        maxSize: 2,
        maxNumber: Infinity,
        multiple: true,
      },
    },
  },
  {
    title: '文件上传',
    dataIndex: 'FileUrls',
    dataType: 'upload',
    formVisible: true,
    formEditable: true,
    filterable: true,
    required: true,
    sorter: false,
    width: 300,
    align: 'left',
    formSchema: {
      componentProps: {
        accept: [],
        maxSize: 20,
        multiple: true,
      },
    },
  },
  {
    title: '文章内容',
    dataIndex: 'Content',
    dataType: 'string',
    width: 150,
    formVisible: true,
    formEditable: true,
    required: true,
    filterable: true,
    sorter: true,
    defaultHidden: true,
    align: 'center',
    formSchema: {
      label: '文章内容',
      field: 'Content',
      component: 'Editor',
      componentProps: {
        autoSize: { minRows: 8, maxRows: 10 },
      },
      colProps: {
        xs: 24, // <576px
        sm: 24, // ≥576px
        md: 24, // ≥768px
        lg: 24, // ≥992px
        xl: 24, // ≥1200px
        xxl: 24, // ≥1600px
      },
    },
  },
  {
    title: '排序号',
    dataIndex: 'OrderNo',
    dataType: 'number',
    width: 150,
    formVisible: true,
    formEditable: true,
    required: true,
    filterable: true,
    sorter: false,
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'CreatedTime',
    dataType: 'datetime',
    width: 200,
    formVisible: true,
    formEditable: false,
    required: false,
    filterable: true,
    sorter: true,
  },
];

export const columns_1: AdColumn[] = [
  {
    title: '标题图片',
    dataIndex: 'ImageBase64',
    //dataType: 'image',
    formVisible: true,
    formEditable: true,
    filterable: true,
    required: true,
    sorter: false,
    width: 300,
    align: 'center',
    formSchema: {
      render: ({ model, field }) => {
        return h(ImageSelector, {
          accept: ['png', 'jpeg', 'jpg', 'bmp', 'ico', 'gif'],
          value: model[field],
          onChange: (img) => {
            model[field] = img.base64;
          },
        });
      },
    },
  },
];

export interface ArticleInputDto {
  Id: string;
  Title: string;
  TitleImage: string;
  OrderNo: number;
}

export interface ArticleOutputDto {
  Id: string;
  Title: string;
  TitleImage: string;
  OrderNo: number;
  CreatedTime: Date;
}
